
<template>
  <a-modal
    :title="'辅料库列表'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >

    <div class="background">
      <a-card style="margin-bottom: 10px">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="辅料编号">
                <a-input
                  allow-clear
                  placeholder="请输入辅料编号"
                  v-model="code"
                ></a-input>
              </a-form-item>
              <a-form-item label="物料名称">
                <a-input
                  allow-clear
                  placeholder="请输入物料名称"
                  v-model="name"
                ></a-input>
              </a-form-item>
              <a-form-item label="辅料大类">
                <a-select
                  style="width: 180px"
                  placeholder="请选择辅料大类"
                  v-model="classifyBig"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in classifyBigList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="辅料小类">
                <a-select
                  style="width: 180px"
                  placeholder="请选择辅料小类"
                  v-model="classifySmall"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in classifySmallList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
      <a-card>
        <a-table
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
          :columns="columns"
          :data-source="dataSource"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <template
            slot="status"
            slot-scope="txt, record"
          >
            <span v-if="record.status == 10">草稿</span>
            <span v-else-if="record.status == 20">启用</span>
            <span v-else-if="record.status == 30">停用</span>
            <span v-else>无效</span>
          </template>
          <template
            slot="examine"
            slot-scope="txt, record"
          >
            <span v-if="record.examine == 0 || record.examine == 20">未审核</span>
            <span v-else>已审核</span>
          </template>
        </a-table>
      </a-card>
      <div class="info-action">
        <a-button
          type="primary"
          style="margin-left: 8px"
          @click="submit"
        >
          提交
        </a-button>
      </div>
    </div>
  </a-modal>

</template>
  
<script>
import { getList, getDictChildList } from '@api/material/index'

const columns = [
  {
    title: '辅料编号',
    dataIndex: 'code'
  },
  {
    title: '辅料名称',
    dataIndex: 'name'
  },
  {
    title: '图片',
    dataIndex: 'distributeChannel'
  },
  {
    title: '辅料大类',
    dataIndex: 'classifyBigValue'
  },
  {
    title: '辅料小类',
    dataIndex: 'classifySmallValue'
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '审核状态',
    scopedSlots: { customRender: 'examine' }
  }
]
export default {
  components: {},

  data() {
    return {
      columns,
      dataSource: [],
      selectedRowKeys: [],
      backId: '',
      loading: false,
      form: this.$form.createForm(this),
      classifyBigList: [],
      classifySmallList: [],
      classifyBig: undefined,
      classifySmall: undefined,
      code: '',
      name: '',
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    reset() {
      this.$emit('closeCopy')
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    loadData() {
      this.getDictChildList('CLASSIFY_BIG', 'classifyBigList')
      this.getDictChildList('CLASSIFY_SMALL', 'classifySmallList')
      this.getList()
    },
    async getDictChildList(name, list) {
      const params = {
        name: name
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this[list] = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取数据字典失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取数据字典失败！')
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.backId = selectedRows[0].accId
      this.selectedRowKeys = selectedRowKeys
    },
    submit() {
      this.$emit('closeCopy', this.backId)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.getList(1)
    },
    async getList(key) {
      this.loading = true
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        code: this.code,
        name: this.name
      }
      if (key) {
        params.current = 1
        params.classifyBig = this.classifyBig
        params.classifySmall = this.classifySmall
      }
      try {
        const res = await getList(params)
        if (res.code == 200) {
          this.dataSource = res.data.records
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}

.ant-modal-body {
  display: flex;
  justify-content: space-between;
}

.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
</style>